<template>
  <div>
    <div class="w100 rowsc rowsm fs-24 fw-b col333 mb-20">
      劳动主题演讲比赛知识竞赛等
    </div>
    <div class="w100 bgff br-16 h-68 rowsb rowsm pl-20 pr-20 trt mb-20">
      <div class="fs-20 col333 fw-b">比赛名称：</div>
      <el-input
        v-model="name"
        placeholder="请输入比赛名称"
        class="w-400 input"
      ></el-input>
    </div>

    <div class="w100 bgff br-16 h-68 rowsb rowsm pl-20 pr-20 trt mb-20">
      <div class="fs-20 col333 fw-b">比赛时间：</div>
      <el-date-picker v-model="time" type="date" placeholder="请输入比赛时间">
      </el-date-picker>
    </div>

    <div class="w100 bgff br-16 h-68 rowsb rowsm pl-20 pr-20 trt mb-20">
      <div class="fs-20 col333 fw-b">主办单位：</div>
      <el-input
        v-model="unit"
        placeholder="请输入主办单位"
        class="w-400 input"
      ></el-input>
    </div>

    <div class="w100 bgff br-16 h-68 rowsb rowsm pl-20 pr-20 trt mb-20">
      <div class="fs-20 col333 fw-b">级别：</div>
      <el-select v-model="choseLevel1" placeholder="选择比赛级别">
        <el-option
          v-for="item in levelList1"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
    </div>

    <div class="w100 bgff br-16 h-68 rowsb rowsm pl-20 pr-20 trt mb-20">
      <div class="fs-20 col333 fw-b">等级：</div>
      <el-select v-model="choseLevel2" placeholder="选择">
        <el-option
          v-for="item in levelList2"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
    </div>

    <div class="w100 bgff br-16 p-all-20 mb-20">
      <div class="fs-20 col333 fw-b mb-10">简要说明：</div>
      <el-input
        type="textarea"
        :rows="4"
        placeholder="请输入您的劳动说明"
        class="input"
        v-model="info"
      >
      </el-input>
    </div>

    <div class="w100 bgff br-16 pl-20 pr-20 trt mb-40" style="padding: 20px">
      <div class="fs-20 col333 fw-b" style="text-align: left">附件上传：</div>
      <el-upload
        class="upload-demo"
        :action="`${this.$apiUploadUrl}/api/utils/ossUpload`"
        :show-file-list="true"
        :multiple="false"
        :limit="6"
        :on-success="uploadSuccess"
        :on-error="uploadErr"
        :on-remove="delFile"
        :before-upload="beforeUpload"
        :disabled="isUploadSuccess"
        accept=".doc, .docx, .pdf, .xls, .xlsx, .jpg, .jpeg, .png, .mp4, .mov, .avi"
      >
        <div class="rows rowsm">
          <img src="../../../static/img/icon_sc.png" class="w-30 h-30" alt="" />
          <div class="fs-20 col888">（可上传word、pdf、excel、图片、视频）</div>
        </div>
        <p class="mark">视频上传最大不超过100M</p>
      </el-upload>
    </div>

    <div class="w100 rowsc rowsm">
       <el-button  type="primary" 
        class="w-400 h-60 br-30 fs-24" 
        style="background-color: #E33636;border:none;font-size:22px;border-radius: 30px;" 
        :disabled="isUploadSuccess"
        @click="submit"
      >提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    type: {
      type: String,
    },
  },
  data() {
    return {
      name: "",
      time: "",
      info: "",
      levelList1: [],
      choseLevel1: "",
      levelList2: [],
      choseLevel2: "",
      unit: "",
      file: "",
      fileName: "",
      fileType: "",
      proFileList: [],
       isUploadSuccess:false
    };
  },
  watch: {},
  computed: {},
  methods: {
    delFile(file) {
      this.proFileList = this.proFileList.filter(
        (item) => item.file != file.response.url
      );
    },
    beforeUpload(file) {
       this.isUploadSuccess = true
      const isLt100M = file.size / 1024 / 1024 < 100;
      if (!isLt100M) {
        this.$message.warning("上传的文件大小不能超过 100MB!");
      }
      return isLt100M;
    },
    submit() {
      if (!this.name)
        return this.$notify({ title: "提示", message: "请输入项目名" });
      if (!this.choseLevel1)
        return this.$notify({ title: "提示", message: "请选择级别" });
      if (!this.choseLevel2)
        return this.$notify({ title: "提示", message: "请选择等级" });
      if (!this.unit)
        return this.$notify({ title: "提示", message: "请输入单位" });
      if (!this.time)
        return this.$notify({ title: "提示", message: "请选择时间" });
      if (!this.info)
        return this.$notify({ title: "提示", message: "请输入内容" });
      if (this.proFileList.length == 0)
        return this.$notify({ title: "提示", message: "请上传文件" });

      let data = {
        type: this.type,
        name: this.name,
        bgTime: this.time,
        jbName: this.choseLevel1,
        djName: this.choseLevel2,
        dwName: this.unit,
        content: this.info,
        file: this.file,
        fileType: this.fileType,
        fileName: this.fileName,
        proFileList: this.proFileList,
      };

      this.$axios.post("prold/add", { ...data }).then((res) => {
        this.$notify({
          title: "提示",
          message: res.data.msg,
        });
        if (res.data.code != 200) return;
        setTimeout(() => {
          this.$emit("back");
        }, 1000);
      });
    },
    uploadSuccess(response, file, fileList) {
      if (response.code == 200) {
        
        console.log("success");
        console.log(response, file, fileList);
        this.proFileList.push({
          file: response.url,
          fileName: response.originalFilename,
          fileType:
            file.raw.type.split("/")[0] == "image" ||
            file.raw.type.split("/")[0] == "video"
              ? file.raw.type.split("/")[0]
              : "file",
        });
        this.$message.success("上传成功");
         this.isUploadSuccess = false
      } else {
        fileList.splice(fileList.indexOf(file),1)
        this.$notify({ title: "提示", message: response.msg || "上传失败" });
         this.isUploadSuccess = false
      }
    },
    uploadErr(err, file, fileList) {
      console.log("err");
      console.log(err, file, fileList);
    },
    getList() {
      this.$axios.post("proldconfig/listJb", {}).then((res) => {
        if (res.data.code != 200)
          return this.$notify({
            title: "提示",
            message: res.data.msg,
          });
        let { rows } = res.data;
        this.levelList1 = rows.map((item) => item.name);
      });
      this.$axios.post("proldconfig/listDj", {}).then((res) => {
        if (res.data.code != 200)
          return this.$notify({
            title: "提示",
            message: res.data.msg,
          });
        let { rows } = res.data;
        this.levelList2 = rows.map((item) => item.name);
      });
    },
  },
  created() {
    this.getList();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.input /deep/ .el-input__inner {
  border: none;
  background-color: rgba(0, 0, 0, 0);
  font-size: 20px;
  text-align: right;
}
</style>
